<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue2.6.12.js"></script>
	</head>
	<body>
		<div id="app">
			<child>
				<template #child-left>
					<div>
						插入的内容
					</div>
				</template>
			</child>
		</div>
	</body>
	<script>
		
		Vue.component('child',{
			data(){
				return {
					name:'yyfei'
				}
			},
			template:`
				<div>
					<slot name="child-left">{{name}}</slot>
					child 子组件
				</div>
			`,
		});
		
		Vue.component("child1",{
			props:[],
			template:`
				<div>
					<slot name="left"></slot>
					child 子组件1
				</div>
			`
		})
		
		var vm = new Vue({
			el:"#app",
			data:{},
			methods:{}
		});
	</script>
	
</html>
